<template>
    <div class="everyDayWallpaper">
        <van-tabs v-model:active="activeName" animated @click-tab="onClickTab">
            <van-tab v-for="item in imgClassList" :title="item.name" :name="item.id">
                <!-- 图片内容区 -->
                <!-- 加载中 -->
                <van-loading vertical v-show="loadingShow" color="#0094ff">
                    <template #icon>
                        <van-icon name="star-o" size="30" />
                    </template>
                    加载中...
                </van-loading>
                <!-- 图片列表 -->
                <div class="image-list-box">
                    <div v-show="!loadingShow" class="image-item" v-for="item in imagesItemList" :key="item.pid">

                        <img v-lazy="item.url" alt="" @click="lookImage(item.url)">
                    </div>
                    <van-pagination v-model="currentPage" :total-items="125" :show-page-size="3" force-ellipses
                        @change="getPageImgList(name)" />
                </div>
                <!-- 分页 -->

            </van-tab>

        </van-tabs>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { showImagePreview } from 'vant';
import axios from "axios";

const activeName = ref('6');
const imgClassList = ref([])


const imagesItemList = ref([])
// 加载中显示状态
const loadingShow = ref(false);

// 分页
const currentPage = ref(1);
const getPageImgList = () => {
    // console.log(currentPage.value);
    axios(`/api?c=WallPaperAndroid&a=getAppsByCategory&cid=${activeName.value}&start=${currentPage.value * 10}&count=10`).then(({ data }) => {
        console.log('壁纸xiayiye', data);
        imagesItemList.value = data.data
    })

}

// 点击切换分类
const onClickTab = ({ name }) => {
    // 把页码下标改回1
    currentPage.value = 1
    loadingShow.value = true
    setTimeout(() => {
        axios(`/api?c=WallPaperAndroid&a=getAppsByCategory&cid=${name}&start=0&count=10`).then(({ data }) => {
            // console.log('壁纸', data);
            imagesItemList.value = data.data
            loadingShow.value = false
        })
    }, 500)

}

// 点击显示图片
const lookImage = (imgurl) => {
    showImagePreview({
        images: [imgurl],
        showIndex: false,

    });
}
onMounted(() => {
    axios('/api?c=WallPaperAndroid&a=getAllCategories').then(({ data }) => {
        // console.log(data);
        imgClassList.value = data.data
    })
    onClickTab({ name: 6 })

})
</script>
<style lang="scss">
.everyDayWallpaper {
    padding: 3.125rem 0 0;

    .van-loading {
        margin: 13.75rem 0;
    }

    .image-list-box {

        padding: 0 .875rem;

        .image-item {
            width: 100%;
            height: 100%;
            margin: .875rem 0;
            border-radius: .625rem;
            box-shadow: -1px 1px 3px 1px #ccc;



            img {
                width: 100%;
                border-radius: 10px;
                vertical-align: bottom;
            }
        }
    }
}

.van-image-preview__image {

    img {
        width: 100%;
        height: 100%;
        vertical-align: bottom;
    }
}
</style>